<script setup lang="ts" name="workBench">
import '@/assets/css/animation.css'
import { onMounted } from 'vue'
import MsgUps from '@/components/popUps/msgUps.vue'
import { useModalStore } from '@/stores/modalStore'
import { storeToRefs } from 'pinia'
const { isPops } = storeToRefs(useModalStore())

import useWokBench from '@/views/hooks/workBench'
const {
  MineInfo,
  ColumnList,
  TagList,
  BenchMenu,
  ReaderFile,
  EditText,
  article,
  btnDisabled,
  tags,
  tagsChild,
  columns,
  getColumnId,
  getColumnsTagsList,
  saveArticle,
  publicAtrical
} = useWokBench()

onMounted(async () => {
  await getColumnsTagsList()
})
</script>

<template>
  <div id="workBench">
    <div id="left">
      <component :is="MineInfo"></component>
      <hr />
      <component
        :is="BenchMenu"
        :disabled="btnDisabled"
        @save="saveArticle"
        @public="publicAtrical"
      ></component>
      <hr />
      <component :is="ColumnList" :columns="columns" @selectedColumnId="getColumnId"></component>
      <hr />
      <component :is="TagList" :tags="tags" ref="tagsChild"></component>
      <hr />
      <component :is="ReaderFile"></component>
    </div>
    <div id="center">
      <component :is="EditText" ref="article"></component>
    </div>
    <!-- <div id="center">
    </div> -->
  </div>
  <Transition name="slide-fade">
    <component :is="MsgUps" v-if="isPops"></component>
  </Transition>
</template>

<style scoped lang="less">
hr {
  margin: 3px 0;
  opacity: 0;
}
#workBench {
  min-height: calc(100vh - 6px);
  padding: 0 16px;
  margin: 0 auto;
  padding-top: 6px;
  display: flex;
  background-color: var(--color2);
  justify-items: center;
  gap: 10px;
  #left {
    width: 220px;
    padding: 10px;
    flex: none;
    background-color: var(--color1);
    border-radius: var(--radius) 0 0 var(--radius);
  }
  #center {
    padding: 10px;
    min-width: 800px;
    flex: auto;
    background-color: var(--color1);
  }
  /* #right {
    width: 220px;
    padding: 10px;
    flex: none;
    background-color: var(--color1);
    border-radius: 0 var(--radius) var(--radius) 0;
  } */
}
</style>
